<template>
  <el-dialog
      :before-close="hideDialog"
      :close-on-click-modal="false"
      :visible.sync="pendingOrderDialogVisible"
      append-to-body
      destroy-on-close
      title="挂单列表"
      width="800px"
      @open="handleOpenDialog">
    <!-- 挂单列表 -->
    <el-alert :closable="false" :title="warningText" show-icon type="info"></el-alert>
    <el-row :gutter="10" style="margin-top: 10px;">
      <el-col v-for="(item,index) in pendingOrderList" :key="index" :span="8" @click.native="handleClick(item,index)">
        <el-card v-waves :class="{'disactive': !item.quantity }" class="box-card order-item">
          <div class="order-number"> {{ index + 1 }}</div>
          <!-- 删除挂单按钮 -->
          <div v-show="!!item.quantity" class="order-delete" @click.stop="handleDelete(index)">
            <el-button size="small" type="danger">删除</el-button>
          </div>
          <div v-show="item.quantity" class="order-info">会员：{{ item.member ? item.member.phone : '非会员' }}</div>
          <div v-show="item.quantity" class="order-info">数量：{{ item.quantity }} 件</div>
          <div v-show="item.quantity" class="order-info">金额：{{ item.amount }} 元</div>
          <div v-show="item.quantity" class="order-info">时间：{{ item.pendingTime }}</div>
          <div v-show="!item.quantity" class="order-null-tips">暂无挂单</div>
        </el-card>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import moment from 'moment'

var Mousetrap = require('mousetrap')
export default {
  name: 'PendingOrderDialog',
  data () {
    return {
      warningText: '直接按下对应的数字键或点击对应的位置即可新建或者恢复挂单，退出登录即会自动删除挂单记录。'
    }
  },
  computed: {
    ...mapGetters([
      'pendingOrderDialogVisible',
      'stationId',
      'operator',
      'memberId',
      'memberInfo',
      'cartList',
      'numsOfCartList',
      'cartGoodsAmount',
      'pendingOrderList'
    ])
  },
  mounted () {
    console.log('PendingOrderDialog mounted!')
  },
  methods: {
    hideDialog () {
      console.log('hideDialog')
      this.$store.dispatch('hidePendingOrderDialog')
      // 解除绑定
      this.unbindKeyboard()
    },
    handleOpenDialog () {
      console.log('handleOpenDialog')
      // 绑定数字快捷键
      this.bindKeyboard()
    },
    // 绑定键盘事件
    bindKeyboard () {
      console.log('bindKeyboard')
      for (var i = 0; i < 9; i++) {
        ((i) => {
          Mousetrap.bind(i + 1 + '', () => {
            console.log('click ' + (i + 1))
            this.handleClick(this.pendingOrderList[i], i)
          })
        })(i)
      }
    },
    // 解除绑定
    unbindKeyboard () {
      for (var i = 0; i < 9; i++) {
        Mousetrap.unbind(i + 1 + '')
      }
    },
    handleClick (item, index) {
      // 如果该挂单记录不为空，则为恢复挂单操作，如果为空，则为新增挂单操作
      if (item.quantity) {
        // 恢复挂单操作
        console.log('恢复挂单操作')
        // 恢复会员信息，恢复非油购物车
        this.$store.dispatch('setMemberInfo', item.member)
        this.$store.dispatch('setCartList', item.cartList)
        // 删除该挂单记录，关闭挂单列表
        this.$store.dispatch('deletePendingOrder', {index: index})
        this.$message.success('恢复挂单成功！')
        // TODO 后续如果有优惠券或者会员优惠则需要重新触发相关操作
        setTimeout(() => {
          this.hideDialog()
        }, 200)
      } else {
        // 新增挂单操作
        console.log('新增挂单操作')
        if (this.numsOfCartList < 1) {
          this.$message.warning('当前购物车没有商品')
          return false
        }
        var data = {
          index: index,
          data: {
            member: JSON.parse(JSON.stringify(this.memberInfo)),
            pendingTime: moment(new Date()).format('MM-DD HH:mm:ss'),
            cartList: JSON.parse(JSON.stringify(this.cartList)),
            quantity: this.numsOfCartList,
            amount: this.cartGoodsAmount
          }
        }
        console.log(data)
        this.$store.dispatch('addPendingOrder', data)
        // 关闭弹窗，清空购物车
        this.$store.dispatch('clearCartList')
        this.$message.success('挂单成功！')
        setTimeout(() => {
          this.hideDialog()
        }, 1000)
      }
    },
    handleDelete (index) {
      console.log('handleDelete')
      this.$store.dispatch('deletePendingOrder', {index: index})
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
.order-item {
  height: 150px;
  position: relative;
  color: dimgray;
}

.order-number {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  background: whitesmoke;
  color: dimgray;
  border-radius: 50%;
}

.order-delete {
  position: absolute;
  top: 5px;
  right: 5px;
}

.order-member {
  padding-top: 10px;
  padding-left: 40px;
}

.order-info {
  padding-top: 10px;
  padding-left: 40px;
}

.disactive {
  filter: grayscale(100%);
}

.active {
  color: orangered;
}

.order-null-tips {
  text-align: center;
  height: 120px;
  line-height: 120px;
}
</style>